<template>

  <a-modal ref="modalRef" v-model:open="showModal" :closable="false" :wrap-style="{ overflow: 'hidden' }" :footer="null"
    width="400px" :maskClosable="false" centered :maskStyle="{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }">
    <div class="modal-frame">
      <div class="login-title">登录</div>
      <div class="form-frame">
        <a-form :model="form" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off"
          @finish="onSubmit" labelAlign="left">
          <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请填写账号!' }]">
            <a-input v-model:value="form.username" placeholder="请填写账号" />
          </a-form-item>


          <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请填写你的密码!' }]">
            <a-space direction="vertical" size="middle" style="width: 100%">
              <a-input-password v-model:value="form.password" type="password" placeholder="请填写你的密码" />
            </a-space>
          </a-form-item>


          <a-form-item label="验证码" name="captcha" :rules="[{ required: true, message: '请填写验证码!' }]">
            <a-input v-model:value="form.captcha" placeholder="请填写验证码" style="margin-left: 0.3vw;" />
          </a-form-item>


          <div style="width: 100%;  margin-bottom: 0.52vw; padding-left: 3vw; cursor: pointer;">
            <img :src="randomImageList" alt="" @click="obtainverify">
          </div>

          <a-form-item :wrapper-col="{ span: 24 }">
            <a-button class="login-btn" type="primary" :loading="loading" html-type="submit" style="width: 100%;">登录</a-button>

          </a-form-item>
          <!-- <a-button class="login-btn" :loading="loading" html-type="submit">登录</a-button> -->


        </a-form>
      </div>
    </div>
  </a-modal>


</template>

<script setup>
import { ref, defineExpose } from 'vue'
const showModal = ref(false);
import { message } from 'ant-design-vue'

// 方法
import { setToken, setUserId, setUserPermission } from '@/utils/token'

// 状态仓库
import { useStore } from '@/store/index'
const store = useStore()


// 接口
import { useHttp } from '@/api/http'


const form = ref({
  username: null,
  password: null,
  captcha: null,
  checkKey: '',
})




const loading = ref(false);
// 打开
const open = () => {
  showModal.value = true;
  obtainverify()
}

// 关闭
const close = () => {
  showModal.value = false;
}

// 登录
const onSubmit = () => {
  loading.value = true;
  useHttp.post('/sys/pcLogin', form.value).then(res => {

    store.user.setUserInfo(res.result.userInfo)
    setToken(res.result.token)
    setUserId(res.result.userInfo.id)
    message.success('登录成功！')
    setTimeout(() => {
      userPermission()
    }, 1000)
  }).catch(err => {
    loading.value = false;
    message.error(err.message)
  })
}


// 查看账号权限
const userPermission = () => {
    useHttp.get('/sys/permission/getUserPermissionByToken').then(res => {
    }).catch(res => {
      if(res.code == 0) {
        let userPermission = {}
        for(let i of res.result.codeList) {
          userPermission[i] = 1
        }
        setUserPermission(userPermission)
        window.location.reload()
      }
    })
    

}


const randomImageList = ref('')

// 获取验证码
const obtainverify = () => {

  form.value.checkKey = Date.now()
  useHttp.get('/sys/randomImage/' + form.value.checkKey).then(res => {

    randomImageList.value = res.result

  })
}


defineExpose({
  open,
  close
})
</script>

<style scoped lang="less">
.modal-frame {
  .login-title {
    text-align: center;
    font-size: 20px;
  }

  .form-frame {
    margin: 20px;
  }

  .login-btn {
    width: 100%;
    background-color: #ee9b86;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
  }
}
</style>
